import React from 'react';
import { connect } from '@/dva';
import ImageContent from './content';
import styles from './style.moudle.scss';
import { ConnectProps } from '@/dva/types';
import { RouterProps } from 'react-router';
import { Card, Tabs, Empty, Button } from 'antd';
import { State as ClassifyProps } from '@/models/imageClassify/types';

type Props = ConnectProps & RouterProps &{
  imageClassify: ClassifyProps
}

type State = {
  activeKey: string;
}

@connect({
  imageClassify: ({ imageClassify }) => imageClassify
})
class ImageList extends React.PureComponent<Props, State> {
  state: State = { activeKey: '' };

  get imageClassify() {
    return this.props.imageClassify || {};
  }

  get dataSource() {
    return this.imageClassify?.list || [];
  }

  get activeKey() {
    const { activeKey } = this.state;
    return activeKey ? activeKey : this.dataSource?.[0]?._id;
  }

  componentDidMount() {
    this.props?.commit?.('imageClassify/queryList');
  }

  private onTabChange = (activeKey: string) => {
    this.setState({ activeKey });
  }

  private toCreateClassifyPage = () => {
    this.props?.history.push('/home/image/classify');
  }

  render() {
    return (
      <Card className={styles.card_container}>
        {this.dataSource.length ? (
          <Tabs
            activeKey={this.activeKey}
            onChange={this.onTabChange}
          >
            {this.dataSource.map((item) => {
              return (
                <Tabs.TabPane
                  key={item._id}
                  tab={item.name}
                  children={<ImageContent classifyItem={item}/>}
                />
              )
            })}
          </Tabs>
        ): (
          <Empty description="哎呀！没有分类了~">
            <Button onClick={this.toCreateClassifyPage}>
              新建分类
            </Button>
          </Empty>
        )}
      </Card>
    )
  }
}

export default ImageList;
